<template>
  <el-dialog 
    :title="parking_data.parkingName" 
    :visible.sync="dialogVisible"
    :close-on-click-modal="false" 
    @close="close" 
    @opened="opened"
    >
    <div style="height:500px" >
      <a-map ref="aMap" />
    </div> 
  </el-dialog>
</template>

<script>
import AMap from "@/views/amap"

export default {
  props: {
    flagVisible:{type:Boolean,default:false},
    parking_data:{type:Object,default:()=>({})},
  },
  watch: {
    flagVisible: {
      handler(newValue, oldValue) {
        this.dialogVisible = newValue
      }
    },
  },
  components: {
    AMap
  },
  data() {
    return {
      dialogVisible: false,
      option_map: {
        mapLoad: true
      },
    }
  },
  methods: {
    opened() {
      this.$refs.aMap.mapCreate()
      this.$nextTick(() => {
        const splitLnglat = this.parking_data.lnglat.split(",")
        const lnglat = {
          lng: splitLnglat[0],
          lat: splitLnglat[1]
        }
        this.$refs.aMap.setMarker(lnglat)
      })
    },
    close() {
      this.$refs.aMap.mapDestroy() // 销毁地图
      this.$emit("update:flagVisible",false)
    },
  }
}
</script>

<style lang="scss" scoped>

</style>